<template>
  <view class="container">
    <!-- 根据类型显示不同标题 -->
    <view class="header">
      <text class="title">{{ type === 'idCard' ? '绑定身份证' : '绑定手机号' }}</text>
    </view>

    <!-- 身份证绑定界面 -->
    <view v-if="type === 'idCard'" class="form-container">
      <view class="input-group">
        <text class="label">真实姓名</text>
        <input 
          class="input" 
          placeholder="请输入您的真实姓名"
          placeholder-class="placeholder"
          v-model="idCardForm.name"
        />
      </view>
      
      <view class="input-group">
        <text class="label">身份证号</text>
        <input
          class="input"
          placeholder="请输入18位身份证号码"
          placeholder-class="placeholder"
          v-model="idCardForm.idNumber"
          maxlength="18"
        />
      </view>

      <button 
        class="submit-btn"
        :class="{ active: isIdCardValid }"
        @click="handleIdCardSubmit"
      >
        立即绑定
      </button>
    </view>

    <!-- 手机号绑定界面 -->
    <view v-if="type === 'phone'" class="form-container">
      <view class="input-group">
        <text class="label">手机号码</text>
        <input
          class="input"
          placeholder="请输入11位手机号码"
          placeholder-class="placeholder"
          v-model="phoneForm.phone"
          type="number"
          maxlength="11"
        />
      </view>

      <view class="input-group">
        <text class="label">验证码</text>
        <view class="code-input">
          <input
            class="input"
            placeholder="请输入6位验证码"
            placeholder-class="placeholder"
            v-model="phoneForm.code"
            type="number"
            maxlength="6"
          />
          <button 
            class="code-btn" 
            :disabled="countdown > 0"
            @click="getVerifyCode"
          >
            {{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
          </button>
        </view>
      </view>

      <button 
        class="submit-btn"
        :class="{ active: isPhoneValid }"
        @click="handlePhoneSubmit"
      >
        立即绑定
      </button>
    </view>

    <!-- 协议声明 -->
    <view class="agreement">
      <text>绑定即代表同意《用户服务协议》和《隐私政策》</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: 'phone',
      countdown: 0,
      idCardForm: {
        name: '',
        idNumber: ''
      },
      phoneForm: {
        phone: '',
        code: ''
      }
    };
  },
  computed: {
    isIdCardValid() {
      return /^[\u4e00-\u9fa5]{2,}$/.test(this.idCardForm.name) && 
             /^\d{17}[\dXx]$/.test(this.idCardForm.idNumber);
    },
    isPhoneValid() {
      return /^1[3-9]\d{9}$/.test(this.phoneForm.phone) && 
             /^\d{6}$/.test(this.phoneForm.code);
    }
  },
  onLoad(options) {
    this.type = options.name || 'phone';
  },
  methods: {
    // 获取验证码
    getVerifyCode() {
      if (!/^1[3-9]\d{9}$/.test(this.phoneForm.phone)) {
        uni.showToast({ title: '手机号格式错误', icon: 'none' });
        return;
      }
      
      this.countdown = 60;
      const timer = setInterval(() => {
        if (this.countdown <= 0) {
          clearInterval(timer);
          return;
        }
        this.countdown--;
      }, 1000);
      
      // 这里调用获取验证码接口
      uni.showToast({ title: '验证码已发送', icon: 'success' });
    },

    handleIdCardSubmit() {
      if (!this.isIdCardValid) {
        uni.showToast({ title: '请填写正确信息', icon: 'none' });
        return;
      }
      // 提交身份证绑定逻辑
      uni.showToast({ title: '绑定成功', icon: 'success' });
    },

    handlePhoneSubmit() {
      if (!this.isPhoneValid) {
        uni.showToast({ title: '请填写正确信息', icon: 'none' });
        return;
      }
      // 提交手机绑定逻辑
      uni.showToast({ title: '绑定成功', icon: 'success' });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 40rpx;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.header {
  margin-bottom: 80rpx;
  text-align: center;
  .title {
    font-size: 48rpx;
    font-weight: 600;
    color: #2c3e50;
    position: relative;
    &::after {
      content: '';
      display: block;
      width: 80rpx;
      height: 6rpx;
      background: #2ac2d1;
      margin: 20rpx auto;
      border-radius: 3rpx;
    }
  }
}

.form-container {
  background: #fff;
  padding: 40rpx;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.08);
}

.input-group {
  margin-bottom: 40rpx;
  .label {
    display: block;
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
  }
  .input {
    height: 80rpx;
    padding: 0 20rpx;
    background: #f8f8f8;
    border-radius: 12rpx;
    font-size: 28rpx;
    color: #333;
  }
  .placeholder {
    color: #ccc;
  }
}

.code-input {
  display: flex;
  align-items: center;
  gap: 20rpx;
  .input {
    flex: 1;
  }
  .code-btn {
    width: 200rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 24rpx;
    color: #2ac2d1;
    background: rgba(42,194,209,0.1);
    border-radius: 12rpx;
    &[disabled] {
      background: #f5f5f5;
      color: #ccc;
    }
  }
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: #eee;
  color: #999;
  border-radius: 44rpx;
  font-size: 32rpx;
  transition: all 0.3s;
  &.active {
    background: #2ac2d1;
    color: #fff;
    box-shadow: 0 8rpx 20rpx rgba(42,194,209,0.3);
  }
}

.agreement {
  margin-top: 40rpx;
  text-align: center;
  font-size: 24rpx;
  color: #999;
  text {
    color: #2ac2d1;
  }
}
</style>